import React, { Component } from 'react'
import './RightSongBox.scss'
import { getSimiPlaylist } from '../../../api'

export default class RightSongBox extends Component {
  constructor(){
    super()
    this.state = {
      palyLists:[]
    }
  }
  textClick() {
    console.log('------textClick')
  }
  textClick2(e) {
    e.stopPropagation()
    console.log('------textClick2')
  }
  componentDidMount(){
    getSimiPlaylist({id:this.props.id}).then(({data})=>{
      this.setState({palyLists:data.playlists})
    })
  }
  render() {
    return (
      <div id="RightSongBox">
        <div className="rtitle">相似歌曲</div>
        <div className="other_song_lists">
          {
            this.state.palyLists.map((item) => {
              return (
                <div className="item" key={item.id}>
                  <div className="left">
                    <div className="name">{item.name}</div>
                    <div className="author">{item.creator.nickname}</div>
                  </div>
                  <div className="right">
                    <span className="iconfont icon-bofang1"></span>
                    <span className="iconfont icon-jia"></span>
                  </div>
                </div>
              )
            })
          }
          
        </div>
        <div className="rtitle ">网易云音乐多端下载</div>
        <div className="download_box">
          <div className="icon1 needLogin" onClick={this.textClick.bind(this)}></div>
          <div className="icon2" onClick={this.textClick2.bind(this)}></div>
          <div className="icon3"></div>
        </div>
        <div className="down_text font12px color999">同步歌单，随时畅听320k好音乐</div>
      </div>
    )
  }
}
